<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    html,body,ul,li{margin: 0;padding: 0;}
    li{list-style: none;}
    .router-link{width: 100%;height: 40px;line-height: 40px;text-align: center;}
    .router-link ul{height: 40px;display: flex;background: #ccc;}
    .router-link li{float: left;flex:1;border-left:solid 1px #fff;border-right:solid 1px #fff;}
    .router-link li a{display: block;}

    
    .box{width: 200px;border: solid 1px black;box-sizing: border-box;float: left;text-align: center;}
    .box img{width: 90%;}
    .box span{display: block;line-height: 20px;height: 40px;overflow: hidden;}
  </style>
</head>
<body>
  <div class="router-link">
    <ul>
      <li><a data-href="/home">首页</a></li>
      <li><a data-href="/list">商品列表</a></li>
      <li><a data-href="/cart">购物车</a></li>
      <li><a data-href="/user">个人中心</a></li>
    </ul>
  </div>
  <div class="router-view"></div>
</body>
<script src="./js/main.js" type="module"></script>
</html>